<template>
    <div>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="showAddDialog">新增人员信息</el-button>
          <el-button type="primary" @click="showEditDialog">修改人员信息</el-button>
          <el-button type="danger" @click="showDeleteDialog">删除人员信息</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-tree
            :data="organization"
            node-key="id"
            default-expand-all
            :props="defaultProps"
            @node-click="handleNodeClick">
          </el-tree>
        </el-col>
      </el-row>
  
      
  
      <PersonDialog 
        v-if="showPersonDialog" 
        :visible.sync="showPersonDialog" 
        :is-edit="isEdit" 
        :person="selectedPerson"
        @close="closePersonDialog" 
        @refresh="refreshData"
      />
  
      <DeletePersonDialog 
        v-if="showdeleteDialog" 
        :visible.sync="showdeleteDialog" 
        @close="closeDeleteDialog" 
        @refresh="refreshData"
      />
    </div>
  </template>
  
  <script>
  import PersonDialog from './people/PersonDialog.vue';
  import DeletePersonDialog from './people/DeletePersonDialog.vue';
  import axios from 'axios';
  export default {
    components: {
      PersonDialog,
      DeletePersonDialog
    },
    data() {
      return {
        organization: [
          
        ],
        defaultProps: {
          children: 'list',
          label: 'name'
        },
        showPersonDialog: false,
        isEdit: false,
        showdeleteDialog: false,
        selectedPerson: null
      };
    },
    methods: {
      handleNodeClick(data) {
        if (!data.list) {
          this.selectedPerson = data;
        } else {
          this.selectedPerson = null;
        }
      },
      showAddDialog() {
        this.isEdit = false;
        this.selectedPerson = null;
        this.showPersonDialog = true;
      },
      showEditDialog() {
        if (!this.selectedPerson) {
          this.$message.error('请先选择一个人员');
          return;
        }
        this.isEdit = true;
        this.showPersonDialog = true;
      },
      showDeleteDialog() {
        
        this.showdeleteDialog = true;
      },
      closePersonDialog() {
        this.showPersonDialog = false;
      },
      closeDeleteDialog() {
        this.showdeleteDialog = false;
      },
      refreshData() {
        // 刷新数据的逻辑
        console.log('刷新数据');
      }
    },
    mounted(){
      axios.post('/api/person/getlist')
      .then(res=>{
        this.organization = res.data;
        console.log(res.data)
      })
    }
  };
  </script>
  
  <style scoped>
  /* 样式 */
  </style>
  